<!--
 * @Author: gaoyu gy15354315043@163.com
 * @Date: 2024-10-16 09:42:13
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-11 13:53:52
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <div class="personCenter">
        <el-dropdown trigger="click">
            <div class="flex justify-center items-center">
                <el-image v-if="avatar" :src="avatar" class="user-avatar" />
                <el-image v-else alt="" src="../../../../assets/user_f.jpeg" class="user-avatar" />
                <span id="username" class="username">{{ realName }}</span>
                <CaretBottom class="w-3 h-3" />
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="handlePersonalCenter()">
                        <span style="display: block;">个人信息</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided @click="updatePw()">
                        <span style="display: block;">修改密码</span>
                    </el-dropdown-item>
                    <el-dropdown-item divided @click="logout">
                        <span style="display: block;">退出登录</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
    <updatePassword ref="updatePasswordRef" />
    <personalCenter ref="personalCenterRef" />
</template>
<script lang="ts" setup>
import updatePassword from "./components/update-password.vue";
import personalCenter from "./components/personal-center.vue";
import { useUserStore } from '@/framework/store/modules/user';
import { useRouter, useRoute } from 'vue-router';
import { getCurrentInstance } from 'vue'
import mitt from '../../../../utils/mitt'
import { useTagsViewStore } from '@/framework/store/modules/tagsView';
const tagsViewStore = useTagsViewStore();
const vm = getCurrentInstance()!
const { $modal } = vm.appContext.config.globalProperties
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const avatar = computed(() => userStore.avatar)
const realName = computed(() => userStore.realName)
const updatePasswordRef = ref<InstanceType<typeof updatePassword>>();
const personalCenterRef = ref<InstanceType<typeof personalCenter>>();
/**
 * @description:  修改个人信息
 * @return {*}
 */
const handlePersonalCenter = (): void => {
    mitt.emit('closeNineGrid')
    if (!personalCenterRef.value) return
    personalCenterRef.value.openDialog()
    personalCenterRef.value.infoUserData()
}
/**
 * @description:  修改密码
 * @return {*}
 */
const updatePw = (): void => {
    mitt.emit('closeNineGrid')
    if (!updatePasswordRef.value) return
    updatePasswordRef.value.openDialog()
    updatePasswordRef.value.getPwdConfig()
}
/**
 * @description:  退出登录
 * @return {*}
 */
const logout = (): void => {
    mitt.emit('closeNineGrid')
    $modal.confirm('确认退出登录吗？', '退出').then(() => {
        userStore
            .logout()
            .then(() => {
                tagsViewStore.delAllViews();
            })
            .then(() => {
                location.href = `${localStorage.getItem('basicLoginAddress') || ''}/login?redirect=${location.origin}&isLogout=true`
                // router.push(`/login?redirect=${route.fullPath}`);
            });
    }).catch(() => { })
}
</script>
<style scoped lang="scss">
.personCenter {
    display: flex;
    align-items: center;

    .user-avatar {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        border-radius: 50%;
    }

    .username {
        opacity: 0.9;
        margin-right: 8px;

    }

    span {
        color: #fff;
    }

    svg {
        color: #fff;
        width: 16px;
        height: 16px;
    }

    :deep(.el-image__placeholder) {
        width: 100%;
        display: block;
        background-color: #000;
    }
}
</style>
